<script>
import {defineComponent} from "vue";

export default defineComponent({
      name: "LoginPage",
  date(){
    return{

    }
  },
  methods:{
    toAdminLogin(){
      this.$router.push("/AdminLoginView")
    },
    toRegister(){
      this.$router.push("/RegisterView")
    }
  }
})
</script>

<template>
  <div class="container">
    <div class="form-wrapper">
      <div class="header">动付通</div>
      <el-form
          label-width="auto"
      >
        <el-form-item>
          <el-input type="text" placeholder="用户名" size="large"/>
        </el-form-item>
        <el-form-item>
          <el-input type="password" placeholder="密码" size="large"/>
        </el-form-item>
        <el-form-item label=" ">
          <el-button size="large" color="#000000" round>登录</el-button>
        </el-form-item>
        <el-form-item label=" ">
          <el-button size="large" color="#000000" round @click="toRegister">注册</el-button>
        </el-form-item>
        <el-form-item label=" ">
          <el-button text @click="toAdminLogin">管理员登录</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<style scoped>
.header{
  margin:20% auto;
  position: absolute;
  left: 38%;
  font-size:30px;

}
.el-form{
  margin: 50% auto;
  max-width: 300px;

}
.el-input{
  padding: 10px;
  font-size: 15px;
}
.title{
  margin: auto;
  position: absolute;
  top:20%;
  left: 45%;
  font-size: 50px;
}
.el-button{
  width: 280px;
  margin-top: 10px;
}
.container{
  height: calc(100vh);
  width: 100%;
}
.form-wrapper{
  width: 371px;
  height: 600px;
  border-radius: 20px;
  border:1px gray solid;
  margin: auto;
  position: absolute;
  left: 50%;
  top:50%;
  transform: translate(-50%,-50%);
}
</style>
